<!DOCTYPE html>
{% load static %}
<html lang="zh-CN" style="font-size: 0.2rem;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src='{% static "js/flexible.js" %}'></script>
    <link href="https://cdn.bootcss.com/highlight.js/9.15.8/styles/github.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/highlight.js/9.15.8/highlight.min.js"></script>
    <script src="https://cdn.bootcss.com/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js"></script>
    <script>
        hljs.initHighlightingOnLoad();
        hljs.initLineNumbersOnLoad();
    </script>
    <!--
    <link rel="stylesheet" href="https://unpkg.com/mdui@2.0.3/mdui.css">
    -->
    <link rel="stylesheet" href='{% static "css/mdui.css" %}'>
    {% comment %} <link rel="stylesheet" href='{% static "css/gallery.css" %}'> {% endcomment %}
    <link rel="stylesheet" href='{% static "css/aj.css" %}'>
    <!--
    <script src="https://unpkg.com/mdui@2.0.3/mdui.global.js"></script>
    -->
    <script type="text/javascript" src='{% static "js/marked.js" %}'></script>
    <script type="text/javascript" src='{% static "js/aj.js" %}'></script>
    <script type="text/javascript" src='{% static "js/jquery.js" %}'></script>
    <script type="text/javascript" src='{% static "js/mdui.global.js" %}'></script>
    {% comment %} <script type="text/javascript" src='{% static "js/highlight.min.js" %}'></script> {% endcomment %}
    {% comment %} <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script> {% endcomment %}
    {% comment %} <script type="text/javascript" src='{% static "js/xlsx.full.min.js" %}'></script> {% endcomment %}
    
    <!-- tippy tooltip功能 -->
    {% comment %} <script type="text/javascript" src='{% static "js/tippy/core.js" %}'></script> {% endcomment %}
    {% comment %} <script type="text/javascript" src='{% static "js/tippy/tippy.js" %}'></script> {% endcomment %}

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- 加载动画 -->
    <link rel="stylesheet" href='{% static "css/loading.css" %}'/>
    <!-- <link rel="stylesheet" href="/static/md-style/01_fslong/code.css"> -->
    <link rel="stylesheet" href='{% static "css/code.css" %}'>
    <!-- <link rel="stylesheet" href="/static/md-style/01_fslong/default.css"> -->
    <link rel="stylesheet" href='{% static "css/default.css" %}'>
    {% block extcss %}
    
    {% endblock  %}
    
    {% block title %}
        <title >测试页</title>
    {% endblock  %}
</head>
<body>
    <mdui-layout>
        <mdui-top-app-bar variant="center-aligned" class="example-top-app-bar">
            <!-- <mdui-button-icon id="menuBtn" icon="menu"></mdui-button-icon> -->
            {% block topbar %}
            {% endblock  %}
            
        </mdui-top-app-bar>
      
        <mdui-navigation-drawer close-on-overlay-click class="example-navigation-drawer" style="width:200px;">
          <mdui-list class="drawerList">
            {% block drawer %}
            <mdui-list-item></mdui-list-item>
            {% endblock drawer %}
          </mdui-list>
        </mdui-navigation-drawer>
        
        <mdui-layout-main class="example-layout-main">
            {% block mainlay %}
            {% endblock mainlay %}
        </mdui-layout-main>
        

        
    </mdui-layout>
    <mdui-snackbar closeable class="example-closeable"></mdui-snackbar>
    <mdui-dialog close-on-overlay-click class="example-header" id="userSetDialog">
        <mdui-top-app-bar slot="header">
            {% comment %} <mdui-button-icon icon="close"></mdui-button-icon> {% endcomment %}
            <mdui-top-app-bar-title></mdui-top-app-bar-title>
            {% comment %} <mdui-button variant="text">Save</mdui-button> {% endcomment %}
        </mdui-top-app-bar>
        
    </mdui-dialog>
    <div class="loading">
        <div class="loader">
            
            <div class="loading-square"></div>
            <div class="loading-square"></div>
            <div class="loading-square"></div>
            <div class="loading-square"></div>
        </div>
    </div>
    <script>
        const navigationDrawer = document.querySelector(".example-navigation-drawer");
        const userSetBtn=document.getElementById("userSet");
        const userSetDialog=document.getElementById("userSetDialog")
        const snackbar = document.querySelector(".example-closeable");
         // 显示加载中的div
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelector('.loading').style.display = 'flex';
        });

        // 隐藏加载中的div
        window.addEventListener('load', function() {
            document.querySelector('.loading').style.display = 'none';
        });
        console.log("hello");
        if(userSetBtn){
            userSetBtn.addEventListener('click',() => userSetDialog.open=!userSetDialog.open);
            document.getElementById('avatar-btn').addEventListener('click', function() {
                document.getElementById('avatar').click();
            });
            document.getElementById('avatar').addEventListener('change', function(event) {
                // 获取选择的图片文件
                var file = event.target.files[0];
                
                // 创建一个 FileReader 对象
                var reader = new FileReader();

                // 读取图片文件，并在读取完成后触发回调函数
                reader.addEventListener('load', function (e) {
                // 将读取到的图片数据设置为 mdui-avatar 元素的 src
                    document.getElementById('avatar-btn').src = e.target.result;
                });

                // 读取图片文件
                reader.readAsDataURL(file);
            });
        }
        
        //如果是手机端登陆，则不显示title
        if(aj.checkDevice()){
            //找到类别为<mdui-top-app-bar-title></mdui-top-app-bar-title>的元素
            var element = document.querySelector('#barTitle');
            console.log("barTitle:",element);
            element.remove();

            //删除所有tooltip-content
            var tooltips = document.querySelectorAll('.tooltip-content');
            tooltips.forEach(function(tooltip) {
                tooltip.remove();
            })
        }
        /*const menuBtn = document.querySelector("#menuBtn");*/
    
        /*menuBtn.addEventListener("click", () => navigationDrawer.open = !navigationDrawer.open);*/
    </script>
    {% block extjs %}
    {% endblock %}
</body>
</html>